<template>
  <n-modal
    v-model:show="getProps.modalData.show"
    class="custom-card m-ad-template-media-select"
    preset="card"
    :style="{ width: '80vw' }"
    :bordered="false"
    :segmented="{
      content: true,
      footer: true
    }"
  >
    <template #header> 腾讯素材库 </template>
    <n-space>
      <n-input-group>
        <n-select
          v-model:value="form.keywordType"
          :options="keywordTypeOptions"
          style="min-width: 110px; width: 110px"
        />
        <n-input v-model:value="form.keyword" style="width: 230px" clearable />
      </n-input-group>
      <n-button type="primary" @click="handleSubmit">查询</n-button>
    </n-space>
    <ul v-if="list && list.length" class="list">
      <li v-for="(item, index) in list" :key="index">
        <div class="item" @click="onChange(item)">
          <div style="position: relative">
            <video v-if="getProps.modalData.isVideo" :src="item.previewUrl" />
            <n-image v-else class="n-image" :src="item.previewUrl" fit="contain" :preview-disabled="true" />
            <div v-if="item.videoMillisecond" class="second" style="font-size: 12px"
              >{{ formatNumber(+item.videoMillisecond / 1000) }}s</div
            >
            <div class="tips">
              <span class="size">{{ item.width }}px/{{ item.height }}px</span>
              <span class="bytes">{{ bytesToSize(item.fileSize) }}</span>
            </div>
          </div>
          <div style="width: 145px" @click="stopClick">
            <n-tooltip trigger="hover">
              <template #trigger>
                <div style="padding: 2px 4px">
                  <div class="ellipsis">{{ item.description }}</div>
                  <div>ID:{{ item.mediaId }}</div>
                </div>
              </template>
              {{ item.description }}
            </n-tooltip>
          </div>
        </div>
      </li>
    </ul>
    <div v-else-if="list && list.length === 0" class="null">暂无相关数据...</div>
    <div v-else class="loading">loading...</div>
    <div class="pagination" style="padding: 12px 0">
      <x-pagination ref="paginationElRef" v-model:immediate="immediate" :params="params" @change="setTableData" />
    </div>
  </n-modal>
</template>

<script setup lang="ts">
  import { useRoute, useRouter } from 'vue-router'
  import { XPagination } from '@/components'
  import { computed, reactive, ref } from 'vue'
  import { useStore } from '@/store'
  import { NModal, NImage, NTooltip, NInput, NInputGroup, NSelect, NSpace, NButton, useMessage } from 'naive-ui'
  import { formatNumber, bytesToSize } from '@/utils/index'
  const router = useRouter()
  const route = useRoute()
  const store = useStore()
  const message = useMessage()
  const list = ref()
  const immediate = ref(true)
  const loading = ref(false)
  const props = defineProps({
    modalData: {
      type: Object,
      default: () => ({})
    }
  })
  const getProps = reactive(props)
  const emit = defineEmits(['change'])
  const accountCode = computed(() => {
    return store.state.intelligent.data.accountCode
  })
  const form = ref({
    accountCode: accountCode.value,
    width: getProps.modalData.value,
    height: getProps.modalData.value,
    keywordType: 'description',
    keyword: ''
  })
  const keywordTypeOptions = reactive([
    { label: '素材名称', value: 'description' },
    { label: '素材ID', value: 'mediaId' }
  ])

  const params = computed(() => {
    const { actions, data } = getProps.modalData.pagination || {}
    return {
      // actions: getProps.modalData.isVideo.value ? 'intelligent/getAdsVideoList' : 'intelligent/getAdsImageList',,
      actions: actions,
      data: {
        ...data,
        [form.value.keywordType]: form.value.keyword
      }
    }
  })
  function handleSubmit() {
    if (form.value.keywordType === 'mediaId') {
      const reg = new RegExp('^[0-9]*[1-9][0-9]*$')
      const r = reg.test(form.value.keyword)
      if (!r && form.value.keyword !== '') {
        return message.warning('请输入正确的素材ID')
      }
    }
    immediate.value = true
  }
  function setTableData(res: { data: never[] }) {
    list.value = res.data || []
  }
  function onChange(item: any) {
    emit('change', item)
  }
  function stopClick(e: Event) {
    e.stopPropagation()
  }
</script>

<style scoped lang="scss">
  .m-ad-template-media-select {
    .null,
    .loading {
      text-align: center;
      padding: 20px 0;
    }
    ul.list {
      padding: 0;
      margin: 0;
      list-style: none;
      display: flex;
      flex-wrap: wrap;
      li {
        margin: 0;
        padding: 5px;
        .item {
          border: 1px solid #dcdcdc;
          position: relative;
          cursor: pointer;
        }
        .second {
          position: absolute;
          right: 0;
          top: 0;
          background-color: rgba(0, 0, 0, 0.8);
          color: #fff;
          padding: 4px;
        }
        .tips {
          position: absolute;
          width: 100%;
          bottom: 0;
          background-color: rgba(0, 0, 0, 0.8);
          color: #fff;
          padding: 4px;
          display: flex;
          align-items: center;
          font-size: 12px;
          .size {
            flex: 1;
          }
        }
        .icon {
          position: absolute;
          right: 0;
          top: 0;
          color: #fff;
          background: #fa5a53;
          width: 20px;
          height: 20px;
          line-height: 20px;
          text-align: center;
          display: none;
        }
        .n-image {
          width: 145px !important;
          height: 145px !important;
        }
        video {
          width: 145px !important;
          height: auto !important;
        }
        &:hover {
          .item {
            border: 1px solid #fa5a53;
          }
        }
      }
    }
  }
</style>
